<template>
  <!-- 小额批量打包查询-->
  <el-dialog :title="title" center :visible.sync="openDetailState" width="1024px" :close-on-click-modal="false">
    <el-form ref="editForm" :model="form"  label-width="150px" disabled>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="批次号" prop="id">
              <el-input v-model="form.id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报文标识号" prop="pkgId">
              <el-input v-model="form.pkgId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">

          <el-col :span="12">
            <el-form-item label="报文类型" prop="pkgNo">
              <el-select style="width: 100%;"
                         v-model="form.pkgNo===null||form.pkgNo===undefined?'':form.pkgNo+'-'+form.pkgNoDesc"
                         placeholder="报文类型" :disabled="true"
              >

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="工作日期" prop="workdate">
              <el-date-picker v-model="form.workdate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="来往账标志" prop="drct">
              <el-select style="width: 100%;" v-model="form.drct" placeholder="来往账标志">
                <el-option
                  v-for="dict in dictMap.DRCTCODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部机构号" prop="brno">
              <el-select style="width: 100%;" v-model="form.brno" placeholder="内部机构号">
                <el-option
                  v-for="dict in dictMap['Cnaps2Dict.CP2_BRNO']"
                  :key="dict.value"
                  :label="`${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="发起清算行行号" prop="directSender">
              <el-input v-model="form.directSender" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="发起清算行行名" prop="directSenName">
              <el-input v-model="form.directSenName" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="接收清算行行号" prop="directRecver">
              <el-input v-model="form.directRecver" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="接收清算行行名" prop="directRcvName">
              <el-input v-model="form.directRcvName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>明细业务信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="明细业务总笔数" prop="dtlNum">
              <el-input v-model="form.dtlNum" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="明细业务总金额币种" prop="dtlCurrencyCd">
              <el-input v-model="form.dtlCurrencyCd" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="明细业务总金额" prop="dtlAmount">
              <ht-amount-input
                v-model="form.dtlAmount"
                placeholder="明细业务总金额"
                :disable=true
              ></ht-amount-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="明细业务成功总笔数" prop="dtlSuccNum">
              <el-input v-model="form.dtlSuccNum" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="明细业务成功总金额币种" prop="dtlSuccCurrencycd">
              <el-input v-model="form.dtlSuccCurrencycd" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="明细业务成功总金额" prop="dtlSuccAmount">
              <ht-amount-input
                v-model="form.dtlSuccAmount"
                placeholder="明细业务成功总金额"
                :disable=true
              ></ht-amount-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>NPC信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="NPC处理码" prop="procCode">
              <el-select style="width: 100%;"
                         v-model="form.procCode===null||form.procCode===undefined?'':form.procCode+'-'+form.procCodeDesc"
                         placeholder="原业务类型" :disabled="true"
              >

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="NPC清算日期/终态日期" prop="clrDate">
              <el-date-picker v-model="form.clrDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="NPC拒绝信息" prop="rejectInfo">
              <el-input type="textarea" v-model="form.rejectInfo" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="NPC轧差日期" prop="chkDate">
              <el-date-picker v-model="form.chkDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="NPC轧差场次" prop="chkRound">
              <el-input v-model="form.chkRound" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="包转发日期" prop="npcSndDate">
              <el-date-picker v-model="form.npcSndDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包回执期限" prop="pkgRtrLtd">
              <el-input v-model="form.chkRoupkgRtrLtdnd" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="通讯状态" prop="status">
              <el-select style="width: 100%;" v-model="form.status" placeholder="通讯状态">
                <el-option
                  v-for="dict in dictMap.PKG_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="中心状态" prop="procStatus">
              <el-select style="width: 100%;" v-model="form.procStatus" placeholder="中心状态">
                <el-option
                  v-for="dict in dictMap.PROCESSSTATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="回执交易状态" prop="rtStatus">
              <el-select style="width: 100%;"
                         v-model="form.rtStatus===null||form.rtStatus===undefined?'':form.rtStatus+'-'+form.rtStatusDesc"
                         placeholder="回执交易状态" :disabled="true"
              >

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="回执中心状态" prop="rtProcStatus">
              <el-select style="width: 100%;"
                         v-model="form.rtProcStatus===null||form.rtProcStatus===undefined?'':form.rtProcStatus+'-'+form.rtProcStatusDesc"
                         placeholder="回执中心状态" :disabled="true"
              >

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="报文发送时间" prop="报文发送时间">
              <el-date-picker style="width: 100%;" v-model="form.sndTime" value-format="yyyyMMddHHmmss"
                              type="datetime"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="报文接收时间" prop="报文接收时间">
              <el-date-picker style="width: 100%;" v-model="form.rcvTime" value-format="yyyyMMddHHmmss"
                              type="datetime"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>


    </el-form>

    <ht-table
      ref="dataTable"
      rowKey="id"
      :showSerialNumber="false"
      :showRightToolbar="false"
      :multi-select="false"
      :initData="false"
      :dictMap="dictMap"
      :reqConfig="reqConfig"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
    >
      <template v-slot:operate>
        <el-table-column label="操作" align="center" width="120" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: '明细',
                  // permission: 'user:xxx:xxx',
                  doFunc: () => {
                    handleAction('detials', scope.row);
                  },
                },
              ]"
            />
          </template>
        </el-table-column>
      </template>
    </ht-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
    </div>

    <detail6409 ref="detail6409" :dictMap="dictMap"></detail6409>
    <detail6410 ref="detail6410" :dictMap="dictMap"></detail6410>
    <detail6413 ref="detail6413" :dictMap="dictMap"></detail6413>
    <detail6411 ref="detail6411" :dictMap="dictMap"></detail6411>
    <detail6404 ref="detail6404" :dictMap="dictMap"></detail6404>
    <detail6412 ref="detail6412" :dictMap="dictMap"></detail6412>
    <detail6405 ref="detail6405" :dictMap="dictMap"></detail6405>
  </el-dialog>

</template>
<script>
import { detail,apiUrlDetaiConfig } from "@/api/cnaps/baseBiz/inquire/batch/index";
import HtAmountInput from "@/views/components/HtAmountInput";
import Detail6409 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6409";
import Detail6410 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6410";
import Detail6413 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6413";
import Detail6411 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6411";
import Detail6404 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6404";
import Detail6412 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6412";
import Detail6405 from "@/views/cnaps/baseBiz/inquire/batch/components/detail6405";

export default {
  name: "Detail",
  components: {
    Detail6405,
    Detail6412,
    Detail6404,
    Detail6411,
    Detail6413,
    Detail6410,
    Detail6409,
    HtAmountInput,
  },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      cardList: [],
      busTypeList: [],
      id: "",
      title: "",
      pkgNo: "",
      // 是否显示弹出层
      openDetailState: false,
      // 表单参数
      form: {
        amount: "0.00",
      },
      reqConfig:apiUrlDetaiConfig,
      queryParams:{

      },
      tableBindColumns:[
        { prop: 'btId',  label: '批次号'},
        { prop: 'id',  label: '交易流水号'},
        { prop: 'dtlNo',  label: '明细标识号'},
        { prop: 'vdate',  label: 'CPG日期', type:'date'},
        { prop: 'pkgNo',  label: '报文类型', formatter(row, text, index) {
            return (row["pkgNo"] === null || row["pkgNo"] === undefined ? "" : row["pkgNo"]) + "-" + (row["pkgNoDesc"] === null || row["pkgNoDesc"] === undefined ? "" : row["pkgNoDesc"]);
          }
          },
        { prop: 'bizTypeCode',  label: '业务类型', formatter(row, text, index) {
            return (row["bizTypeCode"] === null || row["bizTypeCode"] === undefined ? "" : row["bizTypeCode"]) + "-" + (row["bizTypeCodeDesc"] === null || row["bizTypeCodeDesc"] === undefined ? "" : row["bizTypeCodeDesc"]);
          }},
        { prop: 'bizCtgyCode',  label: '业务种类', formatter(row, text, index) {
            return (row["bizCtgyCode"] === null || row["bizCtgyCode"] === undefined ? "" : row["bizCtgyCode"]) + "-" + (row["bizCtgyCodeDesc"] === null || row["bizCtgyCodeDesc"] === undefined ? "" : row["bizCtgyCodeDesc"]);
          }},
        { prop: 'amount',  label: '金额', type:'price'},
        { prop: 'status',  label: '业务状态', dictCode:'CP2_STATUS'},
        { prop: 'txnStatus',  label: '通讯状态', dictCode:"COM_STATUS" },
        ],

    };
  },
  watch: {
    dictMap: {
      handler(data) {},
    },
  },
  async mounted() {
    let that = this;
  },
  methods: {
    // 表单重置
    reset() {
      // this.resetForm("editForm");
      this.$set(this, "form", {});
    },
    close() {
      this.reset();
      this.openDetailState = false;
    },
    // 关闭回掉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.reset();
          done();
        })
        .catch((_) => {});
    },
    show(id = "", pkgNo = "") {
      let that = this;
      this.pkgNo = pkgNo;
      this.id = id;
      this.title = "小额批量打包明细";
      if (id) {
        // 如果传了ID 这里查询一个已经存在的数据
        detail({
          id: this.id,
          pkgNo: this.pkgNo,
        }).then((res) => {
          let tempForm = res.result;
          this.$set(this, "form", tempForm);
          let code = tempForm.bizTypeCode;
          this.queryParams.id= id;
          this.queryParams.pkgNo = pkgNo;
          this.openDetailState = true;
          this.$nextTick(() => {
            this.$refs.dataTable.doQuery(true);
          });

        });
      }
    },

    cancel() {
      this.openDetailState = false;
      this.reset();
      this.$emit("editComplete", false);
    },

    handleAction(type, row = {}) {
      switch (type) {
        case "detials":
          // 明细信息
          let pkgNo=row.pkgNo;
          if(pkgNo===null||pkgNo===undefined){
            pkgNo=this.form.pkgNo
          }
          if(pkgNo==='beps.121.001.01'){
            this.$refs.detail6409.show(row.id, pkgNo);
          }else if(pkgNo==='beps.122.001.01'){
            this.$refs.detail6410.show(row.id, pkgNo);
          }else if(pkgNo==='beps.125.001.01'){
            this.$refs.detail6413.show(row.id, pkgNo);
          }else if(pkgNo==='beps.127.001.01'){
            this.$refs.detail6411.show(row.id, pkgNo);
          }else if(pkgNo==='beps.128.001.01'){
            this.$refs.detail6404.show(row.id, pkgNo);
          }else if(pkgNo==='beps.133.001.01'){
            this.$refs.detail6412.show(row.id, pkgNo);
          }else if(pkgNo==='beps.134.001.01'){
            this.$refs.detail6405.show(row.id, pkgNo);
          }
          break;
      }
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
